
<!-- 录页页面 -->
<template>
  <div>
    <div class="banner">
      <div class="tac">
        <img src="@/assets/images/logo1.png" width="25%" alt="">
      </div>
    </div>
    <div class="login">
      <van-cell-group>
        <van-field label="手机号" ref="mobile" type="number" clearable v-model="loginData.mobile" placeholder="请输入手机号" />
      </van-cell-group>
      <van-cell-group>
        <van-field label="密码" type="password" ref="password" clearable v-model="loginData.password" placeholder="请输入密码" />
      </van-cell-group>
      <!-- <van-button type="info" @click="userLogin">登录</van-button> -->
      <van-button :loading="loading" loading-text="加载中..." type="info" @click="userLogin">登录</van-button>
      <div class="crypto-op">
        <span class="forgetPsw" @click="$router.push('/registered')">立即注册</span>
        <a class="forgetPsw" @click="$router.push('/changePassword')">忘记密码</a>
      </div>

    </div>
    <!-- <div class="divider">
		  <van-divider :style="{ color: '#e8bb57', borderColor: '#e8bb57',  }">
		    蜜蜂社区
		  </van-divider>
		</div> -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      loginData: {
        mobile: '',
        password: '',
      },
      loading: false,
    }
  },
  methods: {
    //登录
    async userLogin () {
      if (this.loginData.mobile == '') {
        this.$notify({ type: 'warning', message: '手机号不能为空' });
        this.$refs.mobile.focus();
        return;
      }
      if (!this.regular.checkPhone().test(this.loginData.mobile)) {
        this.$notify({ type: 'warning', message: '手机号格式错误' });
        this.$refs.mobile.focus();
        return;
      }
      if (!this.loginData.password) {
        this.$notify({ type: 'warning', message: '密码不能为空' });
        this.$refs.password.focus();
        return;
      }
      let regu = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
      let re = new RegExp(regu)
      if (!re.test(this.loginData.password)) {
        this.$notify({ type: 'warning', message: '密码是由6-16位数字和字母组成' });
        this.$refs.password.focus();
        return;
      }

      this.loading = true
      const url = '/auth/login'
      let result = await this.request.mobileRequest('POST', url, this.loginData)
      if (result.code == 200) {
        // this.$cookies.set('token',result.data.token,24 * 60 * 60) 
        localStorage.setItem('token', result.data.token)
        localStorage.setItem('userInfo', JSON.stringify(result.data))
        this.$router.replace('/index')
        this.loading = false
      } else {
        this.loading = false
        this.$notify({ type: 'warning', message: result.msg });
      }
    }
  },
  mounted () {

  },
  created () {
    document.onkeydown = (e) => {
      if (e.keyCode == 13) {
        this.userLogin();
      }
    }
  }
}
</script>

<style>
.banner {
  display: flex;
  align-items: center;
  height: 4.5rem;
  background: #e8bb57;
  justify-content: center;
  font-size: 0.7rem;
  color: #fff;
}
.login {
  width: 86%;
  margin-left: 7%;
  padding-top: 1.6rem;
}
.login .van-cell-group {
  margin-bottom: 0.4rem;
}
.checked {
  margin: 0.3rem 0rem;
}
.divider .van-divider {
  left: 4%;
  position: absolute;
  border-color: #e8bb57;
  color: #e8bb57;
  bottom: 0.1rem;
  width: 92%;
}
.crypto-op {
  display: flex;
  align-items: center;
  height: 0.8rem;
}
.crypto-op a {
  position: absolute;
  right: 8%;
}
.crypto-op span {
  position: absolute;
  left: 8%;
}
</style>
